
//
//  WBVisitorView.swift
//  仿微博
//
//  Created by RaoBo on 2018/12/14.
//  Copyright © 2018年 RB. All rights reserved.
//

import UIKit

class WBVisitorView: UIView {

    //访客视图信息字典
    //[imageName  / message]
    // 首页 imageName = "" 不需要设置 , 不写成nil 是为了防止解包。
    var visitorInfo:[String:String]? {
        didSet {
            //1>取字典信息
            guard let imageName = visitorInfo?["imageName"],
                let message = visitorInfo?["message"] else {
                    return
            }
            
            //2>设置文字
            tipsLb.text = message
            
            //3>设置图像
            if imageName == "" { //首页不需要设置
                startAnimation() //转轮动画
                return
            }
            iconIv.image = UIImage(named: imageName)
            
            //其他控制器不需要小房子、遮罩
            houseIv.isHidden = true;
            maskIconView.isHidden = true;
        }
    }
    
   
    //MARK:- 构造函数
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
   
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    ///设置转轮动画
    func startAnimation(){
        let anim = CABasicAnimation(keyPath: "transform.rotation"); //设置动画keypath
        anim.toValue = 2 * Double.pi;
        anim.repeatCount = MAXFLOAT
        anim.duration = 15
        
        //关键:动画完成之后不删除,适用于连续动画切换到后台在进来，切换页面导致的动画暂停bug
        //当 iconIv 销毁之后,动画也会随之销毁。
        anim.isRemovedOnCompletion = false
        
        //添加动画到图层
        iconIv.layer.add(anim, forKey: nil)
    }
    
//    command + alt + /
// MARK: - 私有控件
    //图像iconiv
    private lazy var iconIv = UIImageView(image: UIImage(named: "visitordiscover_feed_image_smallicon"))
    
    //12-18遮罩maskIconView 实现转轮一半显示一半不显示
    var maskIconView = UIImageView(image: UIImage(named: "visitordiscover_feed_mask_smallicon"))
    
    //小房子iv
    private lazy var houseIv = UIImageView(image: UIImage(named: "visitordiscover_feed_image_house"))
    
    //提示文字lb
    private lazy var tipsLb = UILabel.hm_label(withText: "时间没了,钱也没有,日子过的好吗？人家那么调你呢？还是原地踏步", fontSize: 14, textColor: UIColor.darkGray)
    
    //登录按钮
    private lazy var loginButton:UIButton = UIButton.hm_textButton(withTitle: "登录",
                                                          fontSize: 14,
                                                          normalColor: UIColor.orange,
                                                          highlight: UIColor.lightGray,
                                                          backImageName: "common_button_white_disable")
    //注册按钮
    private lazy var registerButton:UIButton = UIButton.hm_textButton(withTitle: "注册",
                                                          fontSize: 14,
                                                          normalColor: UIColor.darkGray,
                                                          highlight: UIColor.lightGray,
                                                          backImageName: "common_button_white_disable")
}


// MARK: - 设置页面
extension WBVisitorView {
    
    private func setupUI(){
        
        backgroundColor = UIColor.hm_color(withHex: 0xEDEDED);
        //1。添加到父视图上
        addSubview(iconIv)
        addSubview(maskIconView)
        addSubview(houseIv)
        addSubview(tipsLb)
        addSubview(loginButton)
        addSubview(registerButton)
        tipsLb.backgroundColor = UIColor.lightGray
        tipsLb.textAlignment = .center
        //2。取消autoresizing. autoresizing 和 autolayout 不能共存。
        for v in subviews {
            v.translatesAutoresizingMaskIntoConstraints = false;
        }
        
        //3。原生自动布局
        //核心公式"view1.attr1 = view2.attr2 * multiplier + constant"
        //Swift和OC的头文件还不一样
        //1>小房子布局
        addConstraint(NSLayoutConstraint(item: iconIv,
                                         attribute: .centerX,
                                         relatedBy: .equal,
                                         toItem: self,
                                         attribute: .centerX,
                                         multiplier: 1,
                                         constant: 0))
        addConstraint(NSLayoutConstraint(item: iconIv,
                                         attribute: .centerY,
                                         relatedBy: .equal,
                                         toItem: self,
                                         attribute: .centerY,
                                         multiplier: 1,
                                         constant: 0))
        
        addConstraint(NSLayoutConstraint(item: houseIv,
                                         attribute: .centerX,
                                         relatedBy: .equal,
                                         toItem: self,
                                         attribute: .centerX,
                                         multiplier: 1,
                                         constant: 0))
        addConstraint(NSLayoutConstraint(item: houseIv,
                                         attribute: .centerY,
                                         relatedBy: .equal,
                                         toItem: self,
                                         attribute: .centerY,
                                         multiplier: 1,
                                         constant: 0))
        
        
        //2>提示文字
        //(x,y,w,h)   top距离iconIv的bottom10px
        addConstraint(NSLayoutConstraint(item: tipsLb, //谁
                                         attribute: .top, //那个属性
                                         relatedBy: .equal,//关系
                                         toItem: iconIv, //参照那个控件
                                         attribute: .bottom, //属性
                                         multiplier: 1, //乘以几
                                         constant: 0)) //常量

        //垂直居中
        addConstraint(NSLayoutConstraint(item: tipsLb,
                                         attribute: .centerX,
                                         relatedBy: .equal,
                                         toItem: self,
                                         attribute: .centerX,
                                         multiplier: 1,
                                         constant: 0))
        //宽度236
        //如果要指定宽高toItem:nil , attribute: .notAnAttribute,
        addConstraint(NSLayoutConstraint(item: tipsLb,
                                         attribute: .width,
                                         relatedBy: .equal,
                                         toItem: nil, //Any? 如果设置宽高就填nil
                                         attribute: .notAnAttribute, //不设置约束
                                         multiplier: 1,
                                         constant: 236))
        


        
        let margin:CGFloat = 20
        //3>登录按钮
        //1.距离屏幕 tipsLabel 0 2.距离tipsLb 的底部20 宽60
        addConstraint(NSLayoutConstraint(item: loginButton,
                                       attribute: .left,
                                         relatedBy: .equal,
                                         toItem: tipsLb,
                                         attribute: .left,
                                         multiplier: 1,
                                         constant: 0))
        //距离tipsLb底部20
        addConstraint(NSLayoutConstraint(item: loginButton,
                                         attribute: .top,
                                         relatedBy: .equal,
                                         toItem: tipsLb,
                                         attribute: .bottom,
                                         multiplier: 1,
                                         constant: margin))
        //宽度60
        addConstraint(NSLayoutConstraint(item: loginButton,
                                         attribute: .width,
                                         relatedBy: .equal,
                                         toItem: nil, //需要设置宽高就填nil
                                         attribute: .notAnAttribute, //需要设置宽高就填 .notAnAttribute
                                         multiplier: 1,
                                         constant: 60))
        //高度30
        addConstraint(NSLayoutConstraint(item: loginButton,
                                         attribute: .height,
                                         relatedBy: .equal,
                                         toItem: nil,
                                         attribute: .notAnAttribute,
                                         multiplier: 1,
                                         constant: 30))

        
        //4 注册按钮
        //右边和 tipsLabel 一样
        addConstraint(NSLayoutConstraint(item: registerButton,
                                         attribute: .right,
                                         relatedBy: .equal,
                                         toItem: tipsLb,
                                         attribute: .right,
                                         multiplier: 1,
                                         constant: 0))
        
        //距离tipsLb底部20
        addConstraint(NSLayoutConstraint(item: registerButton,
                                         attribute: .top,
                                         relatedBy: .equal,
                                         toItem: tipsLb,
                                         attribute: .bottom,
                                         multiplier: 1,
                                         constant: margin))
        //宽度:等于loginButton的宽
        addConstraint(NSLayoutConstraint(item: registerButton,
                                         attribute: .width,
                                         relatedBy: .equal,
                                         toItem: loginButton,
                                         attribute: .width,
                                         multiplier: 1,
                                         constant: 0))
        //高度30:等于loginButton的高
        addConstraint(NSLayoutConstraint(item: registerButton,
                                         attribute: .height,
                                         relatedBy: .equal,
                                         toItem: loginButton,
                                         attribute: .height,
                                         multiplier: 1,
                                         constant: 0))

        
        //这里有疑问。Swift中如何区分 类方法和对象方法。
//        NSLayoutConstraint(item: attribute:) 构造函数
//        NSLayoutConstraint.constraints(withVisualFormat:xxx) 对象调方法。
        
        //左边0 右边0
        //上边0 下边0
        
        let viewDict = ["maskIconView":maskIconView,"registerButton":registerButton]
        let mertics = ["spacing":-20];
        
        //5.遮罩视图布局.
        //
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[maskIconView]-0-|", options: [], metrics: nil, views: viewDict))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[maskIconView]-(spacing)-[registerButton]", options: [], metrics: mertics, views: viewDict))
    }
}


// MARK: - 笔记
extension WBVisitorView {
    //苹果原生自动布局介绍
    //使用自动布局。 关闭 v.translatesAutoresizingMaskIntoConstraints = false;

    /**
     1、 自动布局核心公式 "view1.attr1 = view2.attr2 * multiplier + constant"
     一个控件的某一个属性 = 另外一个控件的某一个属性 * 倍数 + 一个常量。
     对应  7 个参数
     
     2.自动布局构造函数
   
     NSLayoutConstraint(item: 视图,
                        attribute: .height, 约束属性
                        relatedBy: .equal,  约束关系
                        toItem: loginButton, 参照视图
                        attribute: .height,  参照属性
                        multiplier: 1,       乘积
                        constant: 0)         约束数值
     
     3.如果指定 宽 高 的约束
      参照视图设置为 nil
      参照属性选择  .notAnAttribute
     
     
     4.自动布局类函数
     NSLayoutConstraint.constraints(withVisualFormat: VFL公式,
                        options: [], //空就传[] 不能传nil
                        metrics: 约束数值字典 [String:数值],
                        views: 视图字典 [String : 子视图])

     */
    
    
    
    
    //VFL 可视化格式语言 映射关系。
    //连续参照。居中对齐不好写。请使用构造函数
    /**
     V 垂直方向
     H 水平方向
     | 边界
     []  控件,包含控件的名称字符串，对应关系在 views 字典中定义
     ()  常数值，定义控件的宽 / 高度， 可以在 metrics 中指定。  metric ：度量的,米制的,
     - 距离谁个
     */
    
    /**
    "H:|-0-[maskIconView]-0-|
     水平方向 左边 0 右边 0
    */
    
    /**
     垂直方向
     
     */
    
}
